/************************************ media ******************************/
mobile-320() {
  @media (max-width: 320px) {
  {block}
}
}

mobile() {
  @media (max-width: 767px) {
    {block}
  }
}

tablet() {
  @media (min-width: 768px) and (max-width: 991px) {
    {block}
  }
}

desktop() {
  @media (min-width: 992px) {
    {block}
  }
}

desktop-large() {
  @media (min-width: 1600px) {
    {block}
  }
}

/************************************ interpolation ******************************/
vendor(prop, args) {
  -webkit-{prop} args;
  -moz-{prop} args;
  {prop} args;
}

border-radius() {
  vendor('border-radius', arguments);
}

box-shadow() {
  vendor('box-shadow', arguments);
}

transform() {
  vendor('transform', arguments);
}

/************************************ common methods ******************************/

clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after { clear: both; }
}

ellipsis() {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

circle() {
  border-radius: 50%;
}

cover() {
    background-size: cover;
background-position: center;
}

contain() {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}